<script lang="ts" setup>
import post from "../../../../axios";
import {reactive, ref} from "vue";
import {FormInst, NButton, NSpace} from "naive-ui";


// 事件
const emit = defineEmits(["close", "refresh"])

// 接受入参
let init = defineProps<{
  id: number | null
  options: any
}>()
console.log('props: ', init)
let formRef = ref<FormInst | null>(null)

let modal = reactive({
  bordered: false,
  // 点击遮罩是否关闭Modal
  maskClosable: false,
  // Modal预设有card和dialog两种
  preset: 'card',
  title: '详情',
  style: 'width: 60%',
  closeable: true,
  hideColumn: ['id', 'createBy', 'updateBy', 'createTime', 'updateTime'],
  cancel: () => {
    emit('close')
  },
  submit: () => {
  },
  reset: () => {
    post("cloud-code/columnInfo/auto/select", {id: init.id}).then((res: any) => {
      modal.form.model = res
    })
  },
  // 各种事件
  onAfterEnter: () => {
    modal.reset()
  },
  onAfterLeave: () => {

  },
  onEsc: () => {

  },
  onMaskClick: () => {

  },
  onClose: () => {
    emit('close')
  },
  onUpdateShow: (value: boolean) => {
    console.log('detail modal的显示状态变为：', value)
  },
  form: {
    disabled: true,
    inline: false,
    labelWidth: 'auto',
    labelAlign: 'right',
    labelPlacement: 'left',
    model: {
      /*###########auto#start###########*/
      columnCode: null,
      columnComment: null,
      columnDict: null,
      columnLabel: null,
      columnLength: null,
      columnName: null,
      columnNullable: null,
      columnPrecision: null,
      columnRelate: null,
      columnScale: null,
      columnSequence: null,
      columnType: null,
      createBy: null,
      createTime: null,
      tableCode: null,
      updateBy: null,
      updateTime: null,
      /*###########auto##end############*/
      /* append $commonModalFormModelAppender$ */
    },
    rules: {},
    showLabel: true,
    size: 'medium',
    items: {
      /*###########auto#start###########*/
      columnCode: {
        label: 'column编号',
        path: 'columnCode',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnCode的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入column编号',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnCode的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnCode的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnCode的value变为：', value)
          }
        }
      },
      columnComment: {
        label: 'column注释',
        path: 'columnComment',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnComment的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入column注释',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnComment的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnComment的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnComment的value变为：', value)
          }
        }
      },
      columnDict: {
        label: '关联取值范围字典',
        path: 'columnDict',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnDict的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入关联取值范围字典',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnDict的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnDict的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnDict的value变为：', value)
          }
        }
      },
      columnLabel: {
        label: '对应label字段',
        path: 'columnLabel',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnLabel的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入对应label字段',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnLabel的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnLabel的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnLabel的value变为：', value)
          }
        }
      },
      columnLength: {
        label: '字段长度',
        path: 'columnLength',
        span: 24,
        input: {
          clearable: true,
          defaultValue: null,
          loading: null,
          max: null,
          min: null,
          placeholder: '请输入字段长度',
          precision: 0,
          readonly: false,
          showButton: false,
          onBlur: () => {

          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onUpdateValue: (value: number | null) => {
            console.log('[onUpdateValue]columnLength的value变为：', value)
          }
        }
      },
      columnName: {
        label: 'column名称',
        path: 'columnName',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnName的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入column名称',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnName的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnName的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnName的value变为：', value)
          }
        }
      },
      columnNullable: {
        label: '是否可Null',
        path: 'columnNullable',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnNullable的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入是否可Null',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnNullable的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnNullable的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnNullable的value变为：', value)
          }
        }
      },
      columnPrecision: {
        label: '数字位数',
        path: 'columnPrecision',
        span: 24,
        input: {
          clearable: true,
          defaultValue: null,
          loading: null,
          max: null,
          min: null,
          placeholder: '请输入数字位数',
          precision: 0,
          readonly: false,
          showButton: false,
          onBlur: () => {

          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onUpdateValue: (value: number | null) => {
            console.log('[onUpdateValue]columnPrecision的value变为：', value)
          }
        }
      },
      columnRelate: {
        label: '对应依赖字段',
        path: 'columnRelate',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnRelate的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入对应依赖字段',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnRelate的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnRelate的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnRelate的value变为：', value)
          }
        }
      },
      columnScale: {
        label: '小数精度',
        path: 'columnScale',
        span: 24,
        input: {
          clearable: true,
          defaultValue: null,
          loading: null,
          max: null,
          min: null,
          placeholder: '请输入小数精度',
          precision: 0,
          readonly: false,
          showButton: false,
          onBlur: () => {

          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onUpdateValue: (value: number | null) => {
            console.log('[onUpdateValue]columnScale的value变为：', value)
          }
        }
      },
      columnSequence: {
        label: '序列编码',
        path: 'columnSequence',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnSequence的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入序列编码',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnSequence的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnSequence的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnSequence的value变为：', value)
          }
        }
      },
      columnType: {
        label: 'column类型',
        path: 'columnType',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('columnType的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入column类型',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]columnType的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]columnType的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]columnType的value变为：', value)
          }
        }
      },
      createBy: {
        label: '创建人',
        path: 'createBy',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('createBy的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入创建人',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]createBy的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]createBy的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]createBy的value变为：', value)
          }
        }
      },
      createTime: {
        label: '创建时间',
        path: 'createTime',
        span: 24,
        input: {
          defaultValue: null,
          readonly: false,
          type: 'datetime',
          onUpdateFormattedValue: (value: string | null) => {
            console.log('[onUpdateFormattedValue]createTime的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]createTime的value变为：', value)
          }
        }
      },
      tableCode: {
        label: 'table编号',
        path: 'tableCode',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('tableCode的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入table编号',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]tableCode的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]tableCode的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]tableCode的value变为：', value)
          }
        }
      },
      updateBy: {
        label: '修改人',
        path: 'updateBy',
        span: 24,
        input: {
          allowInput: (value: string) => {
            console.log('updateBy的value变为：', value)
            return true
          },
          clearable: true,
          defaultValue: null,
          loading: null,
          maxlength: null,
          minlength: null,
          placeholder: '请输入修改人',
          readonly: false,
          type: 'text',
          onBlur: () => {

          },
          onChange: (value: string | null) => {
            console.log('[onChange]updateBy的value变为：', value)
          },
          onClear: () => {

          },
          onFocus: () => {

          },
          onInput: (value: string | null) => {
            console.log('[onInput]updateBy的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]updateBy的value变为：', value)
          }
        }
      },
      updateTime: {
        label: '修改时间',
        path: 'updateTime',
        span: 24,
        input: {
          defaultValue: null,
          readonly: false,
          type: 'datetime',
          onUpdateFormattedValue: (value: string | null) => {
            console.log('[onUpdateFormattedValue]updateTime的value变为：', value)
          },
          onUpdateValue: (value: string | null) => {
            console.log('[onUpdateValue]updateTime的value变为：', value)
          }
        }
      },
      /*###########auto##end############*/
      /* append $commonModalFormItemsAppender$ */
    }
  }
})

</script>
<template>
  <n-modal
      v-bind="modal"
  >
    <n-form
        ref="formRef"
        v-bind="modal.form"
    >
      <n-grid :cols="24" :x-gap="24">
        /*###########auto#start###########*/
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnCode')" v-bind="modal.form.items.columnCode">
          <n-input v-model:value="modal.form.model.columnCode" v-bind="modal.form.items.columnCode.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnComment')" v-bind="modal.form.items.columnComment">
          <n-input v-model:value="modal.form.model.columnComment" v-bind="modal.form.items.columnComment.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnDict')" v-bind="modal.form.items.columnDict">
          <n-input v-model:value="modal.form.model.columnDict" v-bind="modal.form.items.columnDict.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnLabel')" v-bind="modal.form.items.columnLabel">
          <n-input v-model:value="modal.form.model.columnLabel" v-bind="modal.form.items.columnLabel.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnLength')" v-bind="modal.form.items.columnLength">
          <n-input-number v-model:value="modal.form.model.columnLength" v-bind="modal.form.items.columnLength.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnName')" v-bind="modal.form.items.columnName">
          <n-input v-model:value="modal.form.model.columnName" v-bind="modal.form.items.columnName.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnNullable')" v-bind="modal.form.items.columnNullable">
          <n-input v-model:value="modal.form.model.columnNullable" v-bind="modal.form.items.columnNullable.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnPrecision')" v-bind="modal.form.items.columnPrecision">
          <n-input-number v-model:value="modal.form.model.columnPrecision"
                          v-bind="modal.form.items.columnPrecision.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnRelate')" v-bind="modal.form.items.columnRelate">
          <n-input v-model:value="modal.form.model.columnRelate" v-bind="modal.form.items.columnRelate.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnScale')" v-bind="modal.form.items.columnScale">
          <n-input-number v-model:value="modal.form.model.columnScale" v-bind="modal.form.items.columnScale.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnSequence')" v-bind="modal.form.items.columnSequence">
          <n-input v-model:value="modal.form.model.columnSequence" v-bind="modal.form.items.columnSequence.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('columnType')" v-bind="modal.form.items.columnType">
          <n-input v-model:value="modal.form.model.columnType" v-bind="modal.form.items.columnType.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('createBy')" v-bind="modal.form.items.createBy">
          <n-input v-model:value="modal.form.model.createBy" v-bind="modal.form.items.createBy.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('createTime')" v-bind="modal.form.items.createTime">
          <n-date-picker v-model:value="modal.form.model.createTime" v-bind="modal.form.items.createTime.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('tableCode')" v-bind="modal.form.items.tableCode">
          <n-input v-model:value="modal.form.model.tableCode" v-bind="modal.form.items.tableCode.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('updateBy')" v-bind="modal.form.items.updateBy">
          <n-input v-model:value="modal.form.model.updateBy" v-bind="modal.form.items.updateBy.input"/>
        </n-form-item-gi>
        <n-form-item-gi v-if="!modal.hideColumn.includes('updateTime')" v-bind="modal.form.items.updateTime">
          <n-date-picker v-model:value="modal.form.model.updateTime" v-bind="modal.form.items.updateTime.input"/>
        </n-form-item-gi>
        /*###########auto##end############*/
        /* append $commonTemplateFormAppender$ */
      </n-grid>
    </n-form>
    <template #action>
      <n-space justify="end">
        <n-button
            type="info"
            @click="modal.cancel"
        >
          取消
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped>

</style>